
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">



    <!-- 前后端交互 过程中 代码编写 需要 做的事情  ：  引入 jquery (这个jQuery 有些时候不好用的时候可以统一换一个试试)-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>



</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个标签仅仅用于占位, 把这几个 a 标签挤到右侧去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>

        <!-- a标签 本来就可以自己发起一个 HTTP的请求，所以说 只需要改一下 href 的参数就可以实现 退出登录的操作了-->
        <a href="logout">注销</a>
    </div>
    <!-- 页面主体部分 -->
    <div class="container">
        <!-- 左侧信息 -->
        <div class="container-left">
            <!-- 使用这个 .card 表示用户信息 -->
            <div class="card">
                <!-- 用户头像 -->
                <img src="image/狗头.png" alt="">
                <!-- 用户名 -->
                <h3></h3>
                <a href="#">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧信息 -->
        <div class="container-right">
            <!-- 博客标题 -->
            <h3 class="title"></h3>
            <!-- 博客发布时间 -->
            <div class="date"></div>
            <!-- 博客正文 -->
            <div id="content">
                
            </div>
        </div>
    </div>



    <!-- 前后端交互 过程中 代码编写 需要 做的事情  ：-->
    <script>
        // 定义一个函数
        function getBlog(){
            $.ajax({
                type: 'get',
                url: 'blog' + location.search,
                 // + 后面是为了 新加入的那个 blogId :   blog?blogId=1
                 // location.search 表示的就是 ？ 后面 的整个 jQuery string 的部分的内容

                success: function(body){
                    // body 就是已经被jQuery转换过的 js对象 ， 是响应数据中的 body 部分

                    // 设置博客的标题
                    let h3 = document.querySelector('.container-right h3');
                    h3.innerHTML = body.title;

                    // 设置发布时间
                    let dateDiv = document.querySelector('.container-right .date');
                    dateDiv.innerHTML = body.dataTime;

                    //设置正文
                    // 正文的内容是 markdown 格式的数据
                    // 此处要显示的应该是 渲染过的 markdown 的内容，而不是 markdown 的原始字符串
                    // 第一个参数：是一个 HTML元素的 id, 另一个参数是 一个对象
                    editormd.markdownToHTML('content', {markdown: body.content});
                }
            });
        }

        // 调用定义的函数
        getBlog();





        //  <!-- 验证登录的时候需要做的事情-->
   // 写一个方法来获得 登录状态的 状态码
   function getLoginStatus(){
    $.ajax({
        type: 'get',
        url: 'login',
        success: function(body){
            // 响应 返回 200 的时候会执行到 下面的代码
            // 返回200 表示 用户已经登录，我们就什么都不用做
            console.log("用户已登录");


        },
        error: function(body){
            // 响应返回的 不是 200的时候
            // 登录未成功
            // 需要 跳转到 登录页面(login.html 主页)
            // 前端跳转的写法
            location.assign("login.html");
        }

    });
   }
   // 记得调用方法
   getLoginStatus();



// 接收到 博客详情的作者信息 的方法（并显示到页面上）
   function getAuthor(){
    $.ajax({
        type: 'get',
        url: 'user' + location.search, 
        // 请求： get/user?blogId=1
        // location.search 就是当前页面的 query string
         // 详情页 这里需要显示的是文章的作者的信息

         success: function(body){
            //把响应中得到的 user对象的数据构造到 页面上进行显示
            if(body.userId==0){
                // 服务器没有找到匹配的用户
                alert("当前未找到作者信息！");// 弹个 框
                return;
            }
            
            // 此时我们的 body 是一个合法的user对象了
            let h3 = document.querySelector('.card h3');
            h3.innerHTML = body.username;
         }
    });
        
   }

   getAuthor();




    </script>
    
</body>
</html>